<!-- 创建矿池 -->
<template>
  <div class="CreateMenu">
    <el-dialog
      :visible="isCreationDialogVisible"
      :close-on-click-modal="false"
      width="700px"
      :modal-append-to-body="false"
      :show-close="false"
      :top="`8vh`"
    >
      <BaseDialogHead
        slot="title"
        title="创建菜单"
        icon-class="chuangjiankuangchi16px"
        @handleCloseDialog="handleCloseDialog"
      />

      <div class="fromcontent">
        <el-form
          ref="ruleForm"
          v-loading="loading"
          label-position="left"
          :model="menuForm"
          :rules="rules"
          label-width="100px"
          class="PersonalInfo__ruleForm"
        >
          <el-form-item label="菜单" prop="ismenu">
            <el-radio-group v-model="menuForm.ismenu">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="父级" prop="pid">
            <el-cascader
              v-model="menuForm.pid"
              :options="roles"
              :props="cascaderProps"
              :show-all-levels="false"
              @change="handleCascaderChange"
            />
            <span style="padding-left: 20px">注：不选择则为根目录</span>

          </el-form-item>

          <el-form-item :label="menuForm.ismenu === 1 ? '路由路径': '请求路径'" prop="path">
            <el-input
              v-model="menuForm.path"
              :placeholder="menuForm.ismenu === 1 ? '请输入前端路由路径': '请输入请求路径'"
              class="input-width"
            />
          </el-form-item>

          <el-form-item v-if="menuForm.ismenu === 1" label="组建路径" prop="component">
            <el-input
              v-model="menuForm.component"
              placeholder="请输入组建路径"
              class="input-width"
            />
          </el-form-item>

          <el-form-item v-if="menuForm.ismenu === 1" label="组建标识" prop="name">
            <el-input
              v-model="menuForm.name"
              placeholder="请输入 name 组建路径"
              class="input-width"
            />
          </el-form-item>

          <el-form-item v-if="menuForm.ismenu === 1" label="是否隐藏" prop="hidden">
            <el-radio-group v-model="menuForm.hidden">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- <p>以下是在 meta 标签</p> -->
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="menuForm.title"
              placeholder="请输入菜单栏标题"
              class="input-width"
            />
          </el-form-item>

          <el-form-item v-if="menuForm.ismenu === 1" label="图标" prop="icon">

            <el-input v-model="menuForm.icon" placeholder="请输入路由侧边栏图标" class="input-with-select">
              <el-link
                slot="append"
                href="https://element.eleme.cn/2.14/#/zh-CN/component/icon"
                target="_blank"
              >搜索图标</el-link>
            </el-input>
          </el-form-item>

          <el-form-item v-if="menuForm.ismenu === 1" label="activeMenu" prop="activeMenu">
            <el-input
              v-model="menuForm.activeMenu"
              placeholder="强制修改地址栏url"
              class="input-width"
            />
          </el-form-item>

          <el-form-item label="权重" prop="weigh">
            <el-input v-model="menuForm.weigh" class="input-width" />
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="menuForm.remark" :rows="3" type="textarea" />
          </el-form-item>

        </el-form>
      </div>

      <div slot="footer" class="footer">
        <el-button
          class="footer__btn"
          type="primary"
          :loading="loading"
          @click="submitForm"
        >创建</el-button>

        <el-button
          class="footer__btn"
          type="primary"
          plain
          :loading="loading"
          @click="submitResetForm"
        >重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseDialogHead from '@/components/BaseDialogHead'
import { validateRoleUser, validateNameExist } from '@/utils/validate'
import { menu_add } from '@/api/menu'
export default {
  name: 'CreateMenu',
  // import引入的组件需要注入到对象中才能使用
  components: {
    BaseDialogHead
  },
  props: {
    isCreationDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // 检测是否重名
    var checkNameExist = async(rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写矿池名称'))
      }
      // 检测名称是否重复
      const category = 1
      const check_type = 2
      await validateNameExist(value, category, check_type, callback)
    }
    // 这里存放数据
    return {
      cascaderProps: {
        label: 'title',
        value: 'id',
        checkStrictly: true, // 开启互不关联
        emitPath: false // value 只为选中那个id，如果true则返回选中以及父级id的数组
      },
      menuForm: {
        hidden: 0,
        activeMenu: '',
        component: '',
        ismenu: 1,
        method: '',
        name: '',
        icon: '',
        title: '',
        pid: 0,
        weigh: 0,
        remark: '',
        path: ''
      },
      rules: {
        path: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '请输入组建路径', trigger: 'blur' }
        ],
        // name: [
        //   { required: true, message: '请输入组建路径', trigger: 'blur' }
        // ],
        title: [
          { required: true, message: '请输入菜单栏标题', trigger: 'blur' }
        ],
        method: [
          { required: true, message: '请输入请求方法', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  // 监听属性 类似于data概念
  computed: {
    roles() {
      return this.$parent.dataList
    }
  },
  // 监控data中的数据变化
  watch: {
    // 输入时候转化大写
    'menuForm.method': {
      handler(val, oldVal) {
        if (val !== '') {
          this.menuForm.method = val.toUpperCase()
        }
      },
      deep: true
    }
    // isCreationDialogVisible(newVal) {
    //   if (newVal) {
    //     this.getRoleThreeList()
    //   }
    // }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - keep-alive
  async activated() {},
  // 方法集合
  methods: {
    submitResetForm() {
      this.menuForm = {
        activeMenu: '',
        component: '',
        ismenu: 1,
        method: '',
        name: '',
        icon: '',
        title: '',
        pid: 0,
        weigh: 0,
        remark: '',
        path: ''
      }
      this.$refs.ruleForm.resetFields()
    },
    handleCascaderChange(value) {
      console.log(value)
    },
    async postCreateRole() {
      this.loading = true
      try {
        const postData = this.menuForm

        postData.pid = postData.pid === '' ? 0 : postData.pid

        await menu_add(postData)

        this.$messageOnce({
          message: '菜单创建成功！',
          type: 'success'
        })

        // 调用父组件方法更新 table
        await this.$parent.getMenuList()

        // 向父组件关闭弹窗
        this.handleCloseDialog()
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes())
    },

    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 9,
        label: '三级 1-1-1'
      }])
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3])
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([])
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.postCreateRole()
        } else {
          this.$messageOnce({
            message: '请完善信息',
            type: 'error'
          })
          return false
        }
      })
    },
    handleCloseDialog() {
      this.$emit('RoleCreationClose')
      this.submitResetForm()
    }
  },
  // 进入页面前
  beforeRouteEnter(to, from, next) {
    next((vm) => {})
  },
  // 离开页面前
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>
<style lang="scss" scoped>
.CreateMenu {
  .fromcontent {
    height: 70vh;
    overflow-y: scroll;
  }

  .fromcontent::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  /*滚动条的轨道*/
  .fromcontent::-webkit-scrollbar-track {
    background-color: transparent;
  }
  /*滚动条的滑块按钮*/
  .fromcontent::-webkit-scrollbar-thumb {
    width: 8px;
    height: 238px;
    background: $MainColor;
    border-radius: 5px;
  }
  /*滚动条的上下两端的按钮*/
  .fromcontent::-webkit-scrollbar-button {
    height: 0;
  }

  .PersonalInfo__ruleForm {
    width: 500px;
    margin: 30px auto;

    .subtitle {
      width: 100px;
      height: 30px;
      background: $MainColor;
      border-radius: 30px;
      font-size: 12px;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      line-height: 30px;
    }

    .modules-area {
      margin-top: 20px;

      .modules-item {
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 12px;
        cursor: pointer;
        height: 110px;
        width: 100%;

        .name {
          font-size: 14px;
          font-weight: 500;
          color: #141414;
          line-height: 21px;
        }

        .dec-item {
          position: absolute;
          left: 15px;
          top: 40px;
          width: 210px;

          .item-txt {
            white-space: pre-line;
            height: 32px;
            font-size: 12px;
            font-weight: 400;
            color: #8c8c8c;
            line-height: 16px;
          }
          .item-tips {
            margin-top: 12px;
            font-size: 12px;
            font-weight: 400;
            color: $MainColor;
            line-height: 14px;
            white-space: pre-line;
          }
        }
      }

      .modules-border {
        border: 1px solid $MainColor;
      }
    }
  }

  .footer {
    text-align: center;
    height: 80px;
    line-height: 80px;
    &__btn {
      @include SecondButton();
    }
  }
}

::v-deep .el-dialog__body {
  // padding: 30px 60px;
  padding: 0;
}

::v-deep .el-dialog__footer {
  padding: 0 60px;
  box-shadow: 0px -5px 20px 0px rgba(71, 73, 155, 0.06);
}
</style>
